<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Array as Data</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; // <- A

    function render(data) { // <- B
        var bars = d3.select("body").selectAll("div.h-bar") // <- C
                .data(data); // Update <- D

        // Enter
        bars.enter() // <- E
                .append("div") // <- F
                    .attr("class", "h-bar") // <- G
            .merge(bars) // Enter + Update <- H
                .style("width", function (d) {
                    return (d * 3) + "px"; // <- I
                })
                .text(function (d) {
                    return d; // <- J
                });


        // Exit
        bars.exit() // <- K
                .remove();
    }

    setInterval(function () { // <- L
        data.shift();
        data.push(Math.round(Math.random() * 100));
        render(data);
    }, 1500);

    render(data);
</script>

</body>

</html>